import { connect } from "dva";
import styles from "./index.less";
import { Tabs, TextareaItem, Modal, Toast } from "antd-mobile";
import shareDownload from "images/share-download@3x.png";
import shareFriend from "images/share-friend@3x.png";
import shareWeixin from "images/share-weixin@3x.png";
import edit from "images/edit@3x.png";
import shape from "images/Shape@3x.png";
import iconCopy from "images/icon-coppy@3x.png";
import checkBoxSelected from "images/checkbox_selected+normal@3x.png";
import unselected from "images/icon-imgpick-null@3x.png";
import router from "umi/router";
function App({ promotion, dispatch }) {
  const tabs = [{ title: "小程序推广" }, { title: "图文推广" }];
  const alert = Modal.alert;
  const programAdvertise = () => {
    return (
      <div className={styles.programPmPage}>
        <div className={styles.content}>
          <div className={styles.goodsBorder}>
            <div className={styles.title}>
              苹果(Apple) 苹果iPhone 7 64G 黑色
            </div>
            <img
              src={
                "http://img4.imgtn.bdimg.com/it/u=4066408122,1827807872&fm=26&gp=0.jpg"
              }
              className={styles.goodsPicture}
            />
            <div className={styles.showContent}>
              <img src={shape} className={styles.contentPicture} />
              <div className={styles.shareProgram}>小程序</div>
            </div>
          </div>
        </div>
        <div className={styles.cutOff}>
          <div className={styles.line}>————————</div>
          <div className={styles.tips}>推广</div>
          <div className={styles.line}>————————</div>
        </div>
        <div className={styles.bottom}>
          <div
            className={styles.programAdWeixin}
            onClick={() => {
              Toast.info("文案已复制，正在跳转..", 1);
            }}
          >
            <img src={shareWeixin} className={styles.bottomShareIcon} />
            <div className={styles.bottomButtonText}>微信好友</div>
          </div>

          <div
            className={styles.bottominfo}
            onClick={() => {
              Toast.info("文案已复制，正在跳转..", 1);
            }}
          >
            <img src={shareFriend} className={styles.bottomShareIcon} />
            <div className={styles.bottomButtonText}>朋友圈</div>
          </div>

          <div
            className={styles.bottominfo}
            onClick={() => {
              Toast.success("推广成功", 1);
            }}
          >
            <img src={shareDownload} className={styles.bottomShareIcon} />
            <div className={styles.bottomButtonText}>下载</div>
          </div>
        </div>
      </div>
    );
  };
  const pictureAdvertise = () => {
    return (
      <div>
        <div className={styles.choosePic}>
          <div className={styles.chooseTabbar}>
            <div className={styles.choosePicture}>选择图片</div>
            <div className={styles.chosenPicture}>已选择1张图片</div>
          </div>
          <div
            className={styles.picTab}
            onClick={() => router.push("lookPicture")}
          >
            <div className={styles.picItem}>
              <div className={styles.condition}>
                <img src={checkBoxSelected} className={styles.getChosenPic} />
              </div>
              <img
                src={
                  "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540185712799&di=235400f194793f1f74a9dd80dbde9cd8&imgtype=0&src=http%3A%2F%2Fp0.ifengimg.com%2Fa%2F2016_42%2F40fcff386574f8c_size400_w1920_h1200.jpg"
                }
                className={styles.chosenPic}
              />
            </div>
            <div className={styles.picItem}>
              <div className={styles.condition}>
                <img src={unselected} className={styles.getChosenPic} />
              </div>
              <img
                src={
                  "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540185712799&di=235400f194793f1f74a9dd80dbde9cd8&imgtype=0&src=http%3A%2F%2Fp0.ifengimg.com%2Fa%2F2016_42%2F40fcff386574f8c_size400_w1920_h1200.jpg"
                }
                className={styles.chosenPic}
              />
            </div>
            <div className={styles.picItem}>
              <div className={styles.condition}>
                <img src={unselected} className={styles.getChosenPic} />
              </div>
              <img
                src={
                  "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540185712799&di=235400f194793f1f74a9dd80dbde9cd8&imgtype=0&src=http%3A%2F%2Fp0.ifengimg.com%2Fa%2F2016_42%2F40fcff386574f8c_size400_w1920_h1200.jpg"
                }
                className={styles.chosenPic}
              />
            </div>
            <div className={styles.picItem}>
              <div className={styles.condition}>
                <img src={unselected} className={styles.getChosenPic} />
              </div>
              <img
                src={
                  "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540185963917&di=a7a5e232e9e5aaf1d86338a69d1d9a6c&imgtype=0&src=http%3A%2F%2Fimg.xiazaizhijia.com%2Fuploads%2F2016%2F0908%2F20160908105816495.jpg"
                }
                className={styles.chosenPic}
              />
            </div>
            <div className={styles.picItem}>
              <div className={styles.condition}>
                <img src={unselected} className={styles.getChosenPic} />
              </div>
              <img
                src={
                  "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540185963917&di=a7a5e232e9e5aaf1d86338a69d1d9a6c&imgtype=0&src=http%3A%2F%2Fimg.xiazaizhijia.com%2Fuploads%2F2016%2F0908%2F20160908105816495.jpg"
                }
                className={styles.chosenPic}
              />
            </div>
            <div className={styles.picItem}>
              <div className={styles.condition}>
                <img src={unselected} className={styles.getChosenPic} />
              </div>
              <img
                src={
                  "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540185963917&di=a7a5e232e9e5aaf1d86338a69d1d9a6c&imgtype=0&src=http%3A%2F%2Fimg.xiazaizhijia.com%2Fuploads%2F2016%2F0908%2F20160908105816495.jpg"
                }
                className={styles.chosenPic}
              />
            </div>
          </div>
        </div>
        <div className={styles.editDoc}>
          <div className={styles.editTitle}>编辑推广文案</div>
        </div>
        <TextareaItem
          style={{
            height: "2.30rem",
            border: "1px solid #eeeeee",
            width: "6.90rem",
            fontSize: ".24rem",
            WebkitTextFillColor: "#333333"
          }}
          placeholder="苹果(Apple) 苹果iPhone 7 64G黑色 【在售价】 3888.00元 "
          rows={5}
        />
        <div className={styles.shareTipsBottom}>
          选择推广渠道后将自动复制方案并生成推广链接，请记得粘贴
        </div>
        <div className={styles.bottomTips}>
          <div className={styles.copyText}>
            <img src={edit} className={styles.copyPicture} />
            <a
              onClick={() =>
                alert("推广文案已复制", "", [
                  { text: "取消", onPress: () => {} },
                  { text: "去微信粘贴", onPress: () => {} }
                ])
              }
            >
              <div className={styles.copyTipsText}>
                点击仅复制推广文案和推广链接
              </div>{" "}
            </a>
          </div>
        </div>
        <div className={styles.cutOff}>
          <div className={styles.line}>————————</div>
          <div className={styles.tips}>推广</div>
          <div className={styles.line}>————————</div>
        </div>
        <div className={styles.picAdBottom}>
          <div
            className={styles.picAdWeixin}
            onClick={() => {
              Toast.info("文案已复制，正在跳转..", 1);
            }}
          >
            <img src={shareWeixin} className={styles.bottomShareIcon} />
            <div className={styles.bottomButtonText}>微信好友</div>
          </div>

          <div
            className={styles.picAdfriend}
            onClick={() => {
              Toast.info("文案已复制，正在跳转..", 1);
            }}
          >
            <img src={shareFriend} className={styles.bottomShareIcon} />
            <div className={styles.bottomButtonText}>朋友圈</div>
          </div>
        </div>
      </div>
    );
  };
  return (
    <div className={styles.normal}>
      <div className={styles.topWhiteGap} />
      <Tabs
        tabs={tabs}
        tabBarActiveTextColor="#FD5527"
        tabBarTextStyle={{ fontSize: ".28rem" }}
        tabBarInactiveTextColor="#333333"
        tabBarUnderlineStyle={{
          height: "0.04rem",
          marginLeft: "1.17rem",
          width: "1.40rem",
          borderColor: "#FD5527",
          backgroundColor: "#FD5527",
          flexDirection: "row",
          justifyContent: "center",
          alignItems: "center"
        }}
      >
        {programAdvertise}
        {pictureAdvertise}
      </Tabs>
    </div>
  );
}
export default connect(({ promotion }) => ({ promotion }))(App);
